<template>
  <!-- 自定义背景导航头 -->
  <van-sticky :offset-top="0" z-index="999">
    <div class="hooyn-header" :class="{
      'hooyn-header--fixed': fixed,
      'hooyn-header--shadow': shadow,
      'hooyn-header--border': border
    }" :style="{
      paddingTop: menuInfo.statusBarHeight,
      backgroundColor,
      backgroundImage: `url('${backgroundImage}')`,
      color
    }">
      <div class="hooyn-navbar">
        <div class="hooyn-navbar__header" :style="{
          'height': typeof height === 'string' ? height : typeof height === 'number' ? height + 'px' : '44px',
          'lineHeight': typeof height === 'string' ? height : typeof height === 'number' ? height + 'px' : '44px',
        }">
          <!-- 左侧区域 -->
          <!-- 插槽优先级最高 -->
          <div v-if="$slots.left" class="hooyn-navbar__header-left" :style="{
            width: typeof leftWidth === 'string' ? leftWidth : typeof leftWidth === 'number' ? leftWidth + 'px' : '60px',
          }">
            <slot name="left" />
          </div>
          <div class="hooyn-navbar__header-left" v-else>
            <van-icon v-if="leftIcon && leftIconfont" :name="leftIcon" size="22" :color="leftIconColor"
              @click="handleIconClick" />

            <van-icon v-else-if="leftIcon" :name="leftIcon" size="22" :color="leftIconColor" @click="handleIconClick" />

            <text :style="{ fontSize: fontSize }">{{ leftText }}</text>
          </div>

          <!-- 中间标题文字 -->
          <div class="hooyn-navbar__header-container " :style="{ fontSize: fontSize, color: titleColor }">
            <slot v-if="$slots.main" name="main" />
            <template v-else>
              {{ title }}
            </template>
          </div>

          <!-- 右侧区域 -->
          <div v-if="$slots.right" class="hooyn-navbar__header-right" :style="{
            width: typeof rightWidth === 'string' ? rightWidth : typeof rightWidth === 'number' ? rightWidth + 'px' : '60px',
          }">
            <!-- 插槽优先级最高 -->
            <slot name="right" />
          </div>
          <div class="hooyn-navbar__header-right" v-else>
            <!-- 下来图标 -->
            <van-icon v-if="rightIcon && rightIconfont" :name="rightIcon" :color="rightIconColor" />

            <van-icon v-else-if="rightIcon" :name="rightIcon" :color="rightIconColor" />
            <text :style="{ fontSize: fontSize }">{{ rightText }}</text>
          </div>
        </div>

        <!-- 标题下自动有内容 -->
        <slot v-if="$slots.default" />
      </div>

    </div>
  </van-sticky>
</template>

<script setup>
// 支持左、中、右,left,main,right插槽进行自定义标题
const emits = defineEmits('leftIconClick')
const props = defineProps({
  title: {				//当前头部页面的标题
    type: String,
    default: ''
  },
  titleColor: { //当前头部页面的标题颜色
    type: String,
    default: ''
  },
  fontSize: {
    type: String,
    default: '18px'
  },
  leftText: {			//导航栏左侧文字
    type: String,
    default: ''
  },
  leftIcon: {			//左侧按钮图标（支持vant-icon图标与iconfont图标与图片链接）
    type: String,
    default: ''
  },
  leftIconColor: {
    type: String,
    default: '#000'
  },
  leftIconfont: {		//是否开启支持左侧iconfont图标
    type: Boolean,
    default: false
  },
  rightText: {		//导航栏右侧文字
    type: String,
    default: ''
  },
  rightIcon: {		//右侧按钮图标（支持vant-icon图标与iconfont图标与图片链接）
    type: String,
    default: ''		//arrow-left(左箭头)
  },
  rightIconColor: {
    type: String,
    default: '#000'
  },
  rightIconfont: {		//是否开启支持右侧iconfont图标
    type: Boolean,
    default: false	//arrow(右箭头)
  },
  // 如使用 Number 类型传值默认单位为 px，使用 String 类型传值则必须带单位，如传值无效 ，则使用默认值
  height: {
    type: String || Number,		//组件默认高度为44px
    default: 44
  },
  fixed: {			//是否固定顶部
    type: Boolean,
    default: false
  },
  shadow: {			//开启导航栏阴影
    type: Boolean,
    default: false
  },
  color: {			//导航栏前景色（文字图标颜色）
    type: String,
    default: ''
  },
  backgroundColor: {	//导航栏背景色
    type: String,
    default: '#fff'
  },
  backgroundImage: {
    type: String,
    default: ''
  },
  border: {			//导航栏下是否有边框
    type: Boolean,
    default: false
  },
  leftWidth: {		//导航栏左侧插槽宽度
    type: String || Number,
    default: '60px'
  },
  rightWidth: {		//导航栏右侧插槽宽度
    type: String || Number,
    default: '60px'
  },
  returnNav: {	// 是否返回nav
    type: Boolean,
    default: false
  },
  customLeftClick: {
    type: Boolean,
    default: false
  }
})

let hooynHeaderRef = ref(null)
const router = useRouter()

let menuInfo = ref({})
// 获取各机型手机状态数据
// uni.getSystemInfo({
//   success: (result) => {
// 	// 获取手机系统的状态栏高度（不同手机的状态栏高度不同）  （ 不要使用uni-app官方文档的var(--status-bar-height) 官方这个是固定的20px  不对的 ）
// 	// console.log('当前手机的状态栏高度',result.statusBarHeight)
// 	let statusBarHeight = result.statusBarHeight + 'px'
// 	// console.log(result,'------>result')
// 	// 获取右侧胶囊的信息 单位px
// 	const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// 	//bottom: 胶囊底部距离屏幕顶部的距离
// 	//height: 胶囊高度
// 	//left:   胶囊左侧距离屏幕左侧的距离
// 	//right:  胶囊右侧距离屏幕左侧的距离
// 	//top:    胶囊顶部距离屏幕顶部的距离
// 	//width:  胶囊宽度
// 	// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)
// 	// console.log('计算胶囊右侧距离屏幕右边距离', result.screenWidth - menuButtonInfo.right)
// 	let menuWidth = menuButtonInfo.width + 'px'
// 	let menuHeight = menuButtonInfo.height + 'px'
// 	let menuBorderRadius = menuButtonInfo.height / 2 + 'px'
// 	let menuRight = result.screenWidth - menuButtonInfo.right + 'px'
// 	let menuTop = menuButtonInfo.top + 'px'

// 	// 容区距离页面最上方的高度
// 	let contentTop = result.statusBarHeight + 44 + 'px'

// 	menuInfo.value = {
// 	  statusBarHeight: statusBarHeight,//状态栏高度----用来给自定义导航条页面的顶部导航条设计padding-top使用：目的留出系统的状态栏区域
// 	  menuWidth: menuWidth,//右侧的胶囊宽度--用来给自定义导航条页面的左侧胶囊设置使用
// 	  menuHeight: menuHeight,//右侧的胶囊高度--用来给自定义导航条页面的左侧胶囊设置使用
// 	  menuBorderRadius: menuBorderRadius,//一半的圆角--用来给自定义导航条页面的左侧胶囊设置使用
// 	  menuRight: menuRight,//右侧的胶囊距离右侧屏幕距离--用来给自定义导航条页面的左侧胶囊设置使用
// 	  menuTop: menuTop,//右侧的胶囊顶部距离屏幕顶部的距离--用来给自定义导航条页面的左侧胶囊设置使用
// 	  contentTop: contentTop,//内容区距离页面最上方的高度--用来给自定义导航条页面的内容区定位距离使用
// 	}
//   },
//   fail: (error) => {
// 	console.log(获取不到手机状态)
//   }
// })

// 左侧图标点击事件
const handleIconClick = () => {
  if (props.customLeftClick) {
    emits('leftIconClick')
  } else if (props.leftIcon === 'arrow-left') {
    if (props.returnNav) {
      // uni.redirectTo({
      // 	url: '/pages/nav/index'
      // })
      router.replace({
        path: '/'
      })
    } else {
      // 返回上一页
      router.back()
    }
  } else {
    // 回调传递点击事件
    emits('leftIconClick')
  }

}

// 返回上一页
const goBack = () => {
  router.back()
}

</script>

<style lang="scss" scoped>
.hooyn-header {
  background-size: cover;
  transition: right 0.5s ease-out;

  .hooyn-navbar {
    padding: 0 16px;
    font-size: .75rem;
  }

  // 导航栏
  .hooyn-navbar__header {
    display: flex;
    align-items: center;
    flex-direction: row;

    .hooyn-navbar__header-container {
      flex: 1;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      font-size: 1rem;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .hooyn-navbar__header-right,
    .hooyn-navbar__header-left {
      display: flex;
      align-items: center;

    }

  }
}

.hooyn-header--fixed {
  position: fixed;
  z-index: 998;
  /* #ifdef H5 */
  left: var(--window-left);
  right: var(--window-right);
  /* #endif */
  /* #ifndef H5 */
  left: 0;
  right: 0;
  /* #endif */

}

.hooyn-header--shadow {
  box-shadow: 0 1px 6px #ccc;
}

.hooyn-header--border {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #eee;
}
</style>